<template>
    <div>
      <a-modal
        :title="isEdit ? '编辑' : '新增'"
        :visible="visible"
        :confirm-loading="confirmLoading"
        :width="600"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <a-form-model
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          layout="horizontal"
          labelAlign="left"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
        >
        <a-form-model-item label="所属部门" prop="dep_key">
          <a-tree-select
            v-model="formData.dep_key"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="departmentList"
            allow-clear
            placeholder="请选择部门"
            tree-node-filter-prop="label"
            :replaceFields="{
              children: 'childs',
              label: 'dep_name',
              value: 'pkey',
            }"
          />
        </a-form-model-item>
          <a-form-model-item label="工种名称" prop="data_name">
            <a-input v-model="formData.data_name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="备注">
            <a-textarea v-model="formData.remark" :auto-size="{ minRows: 2, maxRows: 5 }" placeholder="请输入" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </template>
  <script>
  import {
    editWorkApi
  } from '@/api/people'
  import { getDepartmentThreeListApi} from '@/api/people'
  export default {
    data() {
      return {
        isEdit: false,
        visible: false,
        confirmLoading: false,
        pkey: null,
        formData: {
          dep_key: '', // 部门
          data_name: '', // 工种名称
          remark: '', // 备注
        },
        rules: {
          dep_key: [{ required: true, message: '请选择部门', trigger: 'change' }],
          data_name: [{ required: true, message: '请输入工种名称', trigger: 'change' }]
        },
        departmentList: [], // 部门列表
      }
    },
    mounted() {
      this.getDepartmentThreeList()
    },
    methods: {
      add() {
        this.isEdit = false
        this.visible = true
        this.formData.dep_key = ''
        this.formData.data_name = ''
        this.formData.remark = ''
        if(this.departmentList.length > 0) {
          this.formData.dep_key = this.departmentList[0].pkey
        }
      },
      edit(row) {
        console.log(row)
        this.isEdit = true
        this.visible = true
        this.pkey = row.pkey
        this.formData.dep_key = row.dep_key
        this.formData.data_name = row.data_name
        this.formData.remark = row.remark
      },
      handleOk() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            this.confirmLoading = true
            let formObj = {...this.formData}
            if(this.isEdit){
              formObj.pkey = this.pkey
            }
            const {statusCode,errors} = await editWorkApi(formObj)
            this.confirmLoading = false
            if(statusCode == 200) {
              this.visible = false
              this.$parent.getTableData()
            }else {
              this.$message.error(errors)
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      // 获取部门列表
    async getDepartmentThreeList() {
      const { data } = await getDepartmentThreeListApi()
      this.departmentList = data
      if(data && !this.isEdit) {
        this.formData.dep_key = data[0].pkey
      }
    },
    },
  }
  </script>
      
      <style lang="scss" scoped>
  </style>